<template>
    <div class='container'>
        <div class="title">
            建筑物详情
        </div>
        <div class="div_box">
            <h2>{{ datav.buildingsArr.name }}</h2>
            <div>
                {{ datav.buildingsArr.province }}{{ datav.buildingsArr.city }}{{ datav.buildingsArr.area }}{{
                datav.buildingsArr.street }}
                <!-- {{ datav.buildingsArr.address }} -->
            </div>
            <!-- <div v-if="datav.buildingsArr.username!='' && datav.buildingsArr.mobile!=''">责任人：{{ datav.buildingsArr.username }} {{ datav.buildingsArr.mobile }}</div> -->

            <div class="div_item">
                <!-- <div>安装点数量：<span>{{ spaceCount }}</span> </div> -->
                <div>楼层数量：<span>{{ floorCount }}</span></div>
                <!-- <div>设备数量：<span>{{ equipmentCount }}</span></div> -->
            </div>

        </div>
        <el-image :src="xiangqing"></el-image>
    </div>
</template>

<script>
import { mapState } from "vuex";
import {
    reqSpaceManager,
    reqDeviceList
} from "@/api/api";

export default {
    components: {
    },
    data() {
        return {
            xiangqing: require("@assets/images/datav/xiangqing.png"),
            spaceCount: 0,
            floorCount: 0,
            equipmentCount: 0,
        }
    },
    computed: {
        ...mapState(["datav", "user"]),
    },
    watch: {},
    methods: {
        // 获取安装点列表
        async getSpaceList() {
            let res = await reqSpaceManager(1, 10, {
                userId: this.user.userId,
                roleName: this.user.roleName,
                orgId: '',
                parentId: this.datav.buildingsArr.id,
                metaCode: 1,
                isStatistics: 1
            });
            //   console.log(res);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.floorCount = res.data.rows[0].floorCount || 0;
            // this.spaceCount = res.data.rows[0].spaceCount || 0;
        },
        // 获取设备列表
        // async getDataList() {
        //     const res = await reqDeviceList(1, 1, {
        //         userId: this.user.userId,
        //         roleName: this.user.roleName,
        //         buildingId: this.datav.buildingsArr.id,
            // tenantId:this.user.tenantId,
        //     });
        //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        //     //  console.log(res);
        //     this.equipmentCount = res.data.total || 0;
        // },
    },
    created() {
    },
    mounted() {

    }
}
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~'@{vh}vh';
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;
    display: inline-block;
    .fontSize(16);
    position: relative;

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600
    }

    .div_box {
        padding-left: 6%;
        padding-right: 6%;
        box-sizing: border-box;
        color: #fff;

        >div:first-of-type {
            margin-bottom: 2%;
            .fontSize(14)
        }

        z-index: 999;
        position: relative;

        .div_item {
            display: flex;
            margin-top: 20%;
            color: #8EA4E9;
            .fontSize(14);

            // >div:last-of-type {
            //     margin-left: 6%;
            // }

            span {
                color: #fff;
                .fontSize(20);
            }
        }
    }

    .el-image {
        position: absolute;
        right: 2%;
        bottom: 0.9%;
    }
}
</style>